<template>
  <div>
    <div class="top">
      <div class="header">
        <van-nav-bar title="收益明细" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="top-content">
        <div class="content">
          <span class="money">{{firstEarnings}}</span>
          <span class="yuan">直接收益（元）</span>
        </div>
        <div class="content">
          <!-- <span class="money">{{earningsAll}}</span>
          <span class="yuan">累计收益益（元）</span> -->
        </div>
        <div class="content">
          <span class="money">{{earningsAll}}</span>
          <span class="yuan">累计收益益（元）</span>
          <!-- <span class="money">{{secendEarnings}}</span>
          <span class="yuan">间接受益（元）</span> -->
        </div>
      </div>
    </div>
    <div class="tab">
      <van-tabs>
        <van-tab title="直接收益">
          <div class="div" v-for="(item,index) in earningsInfo" :key="index">
            <img :src="item.avatar" class="img" />
            <div class="center">
              <span class="name">{{item.username}}</span>
              <span class="time">期限：{{item.vip_end_time}}</span>
            </div>
            <div class="right">
              <div class="right-top">
                <img src="../assets/images/huiyuan@3x.png" v-if="item.vip_type == '超级会员'" />
                <img src="../assets/images/fuwushang@3x.png" alt v-if="item.vip_type == '城市服务商'" />
                <img src="../assets/images/hehuoren.png" alt v-if="item.vip_type == '城市合伙人'" />
                <img
                  src="../assets/images/ic_shenfenrenzheng@2x.png"
                  alt
                  v-if="item.vip_type == '普通会员'"
                />
                <span>{{item.vip_type}}</span>
                <span v-if="!item.vip_type">普通会员</span>
              </div>
              <span class="add">+{{item.money}}元</span>
            </div>
          </div>
        </van-tab>
        <!-- <van-tab title="间接收益">
          <div class="div" v-for="(item,index) in secend_earningsInfo" :key="index">
            <img :src="item.avatar" class="img" />
            <div class="center">
              <span class="name">{{item.username}}</span>
              <span class="time">期限：{{item.vip_end_time}}</span>
            </div>
            <div class="right">
              <div class="right-top">
                <img src="../assets/images/huiyuan@3x.png" v-if="item.vip_type == '超级会员'" />
                <img src="../assets/images/fuwushang@3x.png" alt v-if="item.vip_type == '城市服务商'" />
                <img src="../assets/images/hehuoren.png" alt v-if="item.vip_type == '城市合伙人'" />
                <img
                  src="../assets/images/ic_shenfenrenzheng@2x.png"
                  alt
                  v-if="item.vip_type == '普通会员'"
                />
                <span>{{item.vip_type}}</span>
                <span v-if="!item.vip_type">普通会员</span>
              </div>
              <span class="add">+{{item.money}}元</span>
            </div>
          </div>
        </van-tab> -->
      </van-tabs>
    </div>
  </div>
</template> 

<script>
export default {
  name: "my_share_income",
  data() {
    return {
      uid: "",
      user_id: "",
      firstEarnings: "",
      earningsAll: "",
      secendEarnings: "",
      earningsInfo: [],
      secend_earningsInfo: []
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.uid) {
      this.uid = this.$route.query.uid;
    }
    if (this.$route.query.user_id) {
      this.user_id = this.$route.query.user_id;
    }
    this.getFirstEarnings();
    this.getEarningsAll();
    this.getSecendEarnings();
    this.firstEarningsInfo();
    this.secendEarningsInfo();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async getFirstEarnings() {
      let params = {
        token: this.$cookies.get("token")
      };
      const res = await this.$axios.post(this.$api.getFirstEarnings, params);
      if (res.code == 1) {
        this.firstEarnings = res.data;
      } else {
        this.$toast("获取用户直接收益失败：" + res.msg);
      }
    },
    async getEarningsAll() {
      let params = {
        token: this.$cookies.get("token"),
        user_id: this.user_id
      };
      const res = await this.$axios.post(this.$api.getEarningsAll, params);
      if (res.code == 1) {
        this.earningsAll = res.data;
      } else {
        this.$toast("获取用户总收益失败：" + res.msg);
      }
    },
    async getSecendEarnings() {
      let params = {
        token: this.$cookies.get("token")
      };
      const res = await this.$axios.post(this.$api.getSecendEarnings, params);
      if (res.code == 1) {
        this.secendEarnings = res.data;
      } else {
        this.$toast("获取用户间接收益失败：" + res.msg);
      }
    },
    async firstEarningsInfo() {
      let params = {
        token: this.$cookies.get("token"),
        page: "",
        month: ""
      };
      const res = await this.$axios.post(this.$api.firstEarningsInfo, params);
      if (res.code == 1) {
        this.earningsInfo = res.data;
      } else {
        this.$toast("获取用户直接收益明细失败：" + res.msg);
      }
    },
    async secendEarningsInfo() {
      let params = {
        token: this.$cookies.get("token"),
        page: "",
        month: ""
      };
      const res = await this.$axios.post(this.$api.secendEarningsInfo, params);
      if (res.code == 1) {
        this.secend_earningsInfo = res.data;
      } else {
        this.$toast("获取用户间接收益明细失败：" + res.msg);
      }
    }
  }
};
</script>

<style scoped>
.header >>> .van-nav-bar .van-icon {
  color: #fff;
}
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.van-nav-bar {
  background-color: #75c2f1;
  border: none;
}
.van-nav-bar__title {
  color: white !important;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
.top {
  background-image: url("../assets/images/bg@3x.png");
  height: 2.45rem;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.top-content {
  height: 2.7rem;
  /* height: 77.55%; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 8%;
  padding-right: 7%;
  align-items: center;
}
.content {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: white;
}
.money {
  font-size: 0.18rem;
  font-family: PingFangSC;
  font-weight: 400;
}
.yuan {
  font-size: 0.1rem;
  font-family: PingFangSC;
  font-weight: 400;
}
.tab >>> .van-tabs__line {
  background-color: white;
}
.tab >>> .van-tab--active {
  color: #00c6d8;
}
.tab >>> .van-tab {
  font-size: 0.16rem;
  font-family: PingFangSC;
  font-weight: 400;
}
.div {
  width: 100%;
  height: 0.6rem;
  background: white;
  /* margin-left:5%; */
  display: flex;
  margin-top: 0.09rem;
}
.img {
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 5%;
  display: flex;
  justify-content: center;
  margin-top: 2.5%;
}
.center {
  width: 60%;
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.name {
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(52, 52, 52, 1);
}
.time {
  font-size: 0.12rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(139, 139, 139, 1);
  padding-top: 5%;
}
.right {
  width: 35%;
  display: flex;
  flex-direction: column;
  text-align: right;
  padding-right: 5%;
}
.right-top {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 0.1rem;
  margin-bottom: 6%;
}
.right-top img {
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 5%;
}
.right-top span {
  font-size: 0.12rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(139, 139, 139, 1);
  /* line-height:.24rem; */
}
.add {
  font-size: 0.12rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 198, 216, 1);
  line-height: 0.2rem;
}
</style>



